import React, { useRef, useEffect, useState } from "react";
import { motion } from "framer-motion";
import emailjs from "@emailjs/browser";
import { styles } from "../styles.js";
import { EarthCanvas, StarsCanvas } from "./canvas";
import { SectionWrapper } from "../hoc";
import { slideIn } from "../utils/motion.js";

const Contact = () => {
  const formRef = useRef();
  const [form, setForm] = useState({
    name: "",
    email: "",
    message: ""
  });
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });

  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    emailjs.send("service_0all5im", "template_vi5yj4r", {
        from_name: form.name,
        to_name: "Maro",
        from_email: form.email,
        to_email: "maro.lrz1020@gmail.com",
        message: form.message
      },
      "AAsEI59TcdA261yDK").then(() => {
      setLoading(false);
      alert("Thank you. I will back to you as soon as possible.");
      setForm({
        name: "",
        email: "",
        message: ""
      });
    }, (error) => {
      setLoading(false);
      console.log(error);
      alert("Something went wrong. Please try again.");
    });
  };

  return (
    <div className={"xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden"}>
      <motion.div
        variants={slideIn("left", "tween", 0.2, 1)}
        className={"flex-[0.75] bg-black-100 p-8 rounded-2xl"}
      >
        <p className={styles.sectionSubText}>Get in touch</p>
        <h3 className={styles.sectionHeadText}>和我联络.</h3>
        <form ref={formRef} onSubmit={handleSubmit} className={"mt-12 flex flex-col gap-8"}>
          <label className={"flex flex-col"}>
            <span className={"text-white font-medium mb-4"}>姓名</span>
            <input
              type="text"
              name={"name"}
              value={form.name}
              onChange={handleChange}
              placeholder={"请输入您的名字"}
              className={"bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"}
            />
          </label>
          <label className={"flex flex-col"}>
            <span className={"text-white font-medium mb-4"}>邮箱</span>
            <input
              type="email"
              name={"email"}
              value={form.email}
              onChange={handleChange}
              placeholder={"请输入您的邮箱"}
              className={"bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"}
            />
          </label>
          <label className={"flex flex-col"}>
            <span className={"text-white font-medium mb-4"}>内容</span>
            <textarea
              rows="7"
              name={"message"}
              value={form.message}
              onChange={handleChange}
              placeholder={"您想对我说什么？"}
              className={"bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium"}
            />
          </label>
          <button
            type="submit"
            className={"bg-tertiary py-3 px-8 outline-none w-fit text-white font-bold shadow-md shadow-primary rounded-xl"}
          >
            {loading ? "正在发送中..." : "发送"}
          </button>
        </form>
      </motion.div>
      <motion.div
        variants={slideIn("right", "tween", 0.2, 1)}
        className={"xl:flex-1 xl:h-auto md:h-[550px] h-[350px]"}
      >
        <EarthCanvas />
      </motion.div>
    </div>
  );
};

export default SectionWrapper(Contact, "contact");